{% extends "personal_center/user-base.html" %}
{% block page_link %}
    <script src="../../static/personal_center/js/link_man.js"></script>
{% endblock %}


{% block page_search %}
<div style="width: 10%;margin-left: 2%;height: 100%;" id="select-div">
        <select class="form-control" id="validationCustom04" style="font-size: 13px;height: 50%;background: #ceebee;">
            <option selected:disabled style="display: none;">查询条件</option>
            <option>姓名</option>
                        <option>性别</option>
                        <option>部门</option>
                        <option>邮箱</option>
                        <option>办公电话</option>
                        <option>手机</option>
        </select>
    </div>
    <div class="iq-search-bar">
        <form action="#" class="searchbox">
            <input id="input_id" type="text" class="text search-input" placeholder="请输入关键词">
            <a class="search-link" href="#"><i class="ri-search-line"></i></a>
        </form>
    </div>
{% endblock %}


{% block page_body %}
    <div class="container-fluid" style="height: 95%;">
        <div class="iq-card" style="height: 100%;">
            <div class="iq-card-header d-flex justify-content-between">
                <div class="iq-header-title">
                    <h4 class="card-title">联系人</h4>
                </div>
            </div>

            <div class="iq-card-body" style="height: 100%;">
                <div style="height: 75%;overflow: auto;">
                    <table class="table">
                        <thead>
                        <tr style="background: #E8E8E8;color: #696969;">
                            <th scope="col">姓名</th>
                            <th scope="col">性别</th>
                            <th scope="col">部门</th>
                            <th scope="col">邮箱</th>
                            <th scope="col">办公电话</th>
                            <th scope="col">手机</th>
                        </tr>
                        </thead>
                        <tbody style="overflow: auto">
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td>黄XX</td>
                            <td>男</td>
                            <td>综合内科</td>
                            <td>Ke6666@139.com</td>
                            <td>01231234567</td>
                            <td>13878903265</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>

                </div>
                <nav style="margin-top: 3%;" aria-label="Page navigation example">
                    <ul class="pagination mb-0">
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
{% endblock %}
